<style include="settings-shared">
  .block {
    display: block;
  }
  settings-dropdown-menu {
    --md-select-width: 425px;
    --settings-dropdown-menu-policy-order: 1;
  }
  #timeZoneResolveMethodDropdown,
  #timezoneSelector {
    padding-inline-start: 28px;
  }
</style>
<div class="settings-box block first">
  <settings-radio-group id="timeZoneRadioGroup"
      pref="{{prefs.generated.resolve_timezone_by_geolocation_on_off}}"
      deep-link-focus-id$="[[Setting.kChangeTimeZone]]">
    <controlled-radio-button
        id="timeZoneAutoDetectOn"
        name="true"
        pref="[[prefs.generated.resolve_timezone_by_geolocation_on_off]]"
        label="$i18n{setTimeZoneAutomaticallyOn}"
        no-extension-indicator>
    </controlled-radio-button>
    <settings-dropdown-menu id="timeZoneResolveMethodDropdown"
        pref="{{prefs.generated.resolve_timezone_by_geolocation_method_short}}"
        label="$i18n{selectTimeZoneResolveMethod}"
        disabled="[[!prefs.generated.resolve_timezone_by_geolocation_on_off.value]]"
        menu-options="[[getTimeZoneResolveMethodsList_(
            prefs.generated.resolve_timezone_by_geolocation_method_short)]]">
    </settings-dropdown-menu>
    <controlled-radio-button
        id="timeZoneAutoDetectOff"
        name="false"
        pref="[[prefs.generated.resolve_timezone_by_geolocation_on_off]]"
        label="$i18n{setTimeZoneAutomaticallyOff}"
        no-extension-indicator>
    </controlled-radio-button>
    <timezone-selector id="timezoneSelector" prefs="{{prefs}}"
        active-time-zone-display-name="{{activeTimeZoneDisplayName}}">
    </timezone-selector>
  </settings-radio-group>
</div>
